<template>
  <div class="back">
  <el-menu
  
    :default-active="activeIndex"
    class="back"
    mode="horizontal"
    :ellipsis="false"
    @select="handleSelect"
    
  >
  <el-menu-item index="0" >
      <img
        style="width: 100px"
        src="C:\Users\荣耀\OneDrive\桌面\项目\项目\ideavr_pro\public\R.png"
        alt="Element logo"
      />
      <p style="font-style: inherit;font-size: larger;font-weight:500;">牛逼vr</p>
    </el-menu-item>
    <el-menu-item index="0" >
     
    </el-menu-item>
    <div class="flex-grow" ></div>
    
    <router-link to="/"><el-menu-item index="1"><div class="front_style">首页</div></el-menu-item></router-link>
    <router-link to="/example"><el-menu-item index="2"><div class="front_style"> 案例</div></el-menu-item></router-link>
    <el-menu-item index="3"><div class="front_style">社区</div></el-menu-item>
    <el-menu-item index="4"><div class="front_style">交流</div></el-menu-item>
    <router-link to="/login"><el-menu-item index="5" v-if="name.value==''"><div class="front_style"> 登录</div></el-menu-item></router-link>
    <router-link to="/signin"><el-menu-item index="6"v-if="name.value==''"><div class="front_style">注册</div></el-menu-item></router-link>
    <el-menu-item index="7"v-if="name.value!=''"><div class="front_style">账户:{{ name }}</div></el-menu-item>
   <el-menu-item index="8"v-if="name.value!=''" @click="  exit"><div class="front_style">退出登录</div></el-menu-item>
  </el-menu>
</div>
</template>

<script lang="js" setup>
import { ref } from 'vue'
import  {useStore } from 'C:/Users/荣耀/OneDrive/桌面/项目/项目/ideavr_pro/src/stores/counter.js';
import { onMounted } from 'vue';
import { useRouter } from 'vue-router'
import { watch } from 'vue';
import { ElMessage } from 'element-plus';
import { onBeforeRouteUpdate } from 'vue-router';
const rout=useRouter()
const activeIndex = ref('1');
const handleSelect = (key, keyPath) => {
  console.log(key, keyPath);
};

 const exit=()=>{
  console.log(name.value)
localStorage.removeItem('name')
localStorage.removeItem('token')
ElMessage.warning("退出成功,请刷新页面")
name.value=''
 nextTick();

}
const name = ref("")
onMounted(() => {
  const store = useStore();
  store.initializeUserFromLocalStorage();
 name.value = ref(store.user.name)
console.log(name.value)
});


</script>

<style>
.flex-grow {
  flex-grow: 1;
  background-attachment: fixed;
  
}
.front_style{
font-size: small;
}
.back{
  width: 80vw;
  display: grid;
    place-items: center;
}

</style>
